<template>
	<template v-if="step === 1">
		<table v-if="settingStore.device === 'pc'" border="0" cellpadding="0" cellspacing="1" class="layui-table" lay-skin="line row">
			<tbody>
				<tr style="height: 40px;">
					<td colspan="6" align="center">{{ $t('基本信息') }}</td>
				</tr>
				<tr>
				
					<td class="lefttd">{{ $t('人员名称') }}<font color="red" style="margin-left:4px">*</font></td>
					<td class="rigthtd">
						<el-input ref="nameRef" v-model="personForm.name" v-elInputCheck="{message:$t('请输入人员名称')}" :size="fontSizeObj.buttonSize"/>
					
					</td>
					<td class="lefttd">{{ $t('登录名称') }}<font color="red" style="margin-left:4px">*</font> </td>
					<td class="rigthtd">
						<el-input ref="loginNameRef" v-model="personForm.loginName" v-elInputCheck="{message:$t('请输入登录名称')}" :size="fontSizeObj.buttonSize"/>
					
					</td>
				
					<td class="lefttd">{{ $t('自定义ID') }}</td>
					<td class="rigthtd">
						<el-input v-model="personForm.customId" :size="fontSizeObj.buttonSize" />
					</td>
					
				</tr>
				<tr>
		
					<td class="lefttd">{{ $t('CA认证码') }}</td>
					<td class="rigthtd">
						<el-input v-model="personForm.caid" :size="fontSizeObj.buttonSize" />
					</td>
					<td class="lefttd">{{ $t('性别') }}</td>
					<td class="rigthtd">
						<el-select v-model="personForm.sex" :placeholder="$t('请选择')" :size="fontSizeObj.buttonSize">
							<el-option v-for="(item,index) in $dictionary().sex"
							:style="{ fontSize: fontSizeObj.baseFontSize }" :key="index" :label="item.name" :value="item.id" />
						</el-select>
					</td>
					<td class="lefttd">{{ $t('是否在编') }}</td>
					<td class="rigthtd">
						<el-select v-model="personForm.official" :placeholder="$t('请选择')" :size="fontSizeObj.buttonSize">
							<el-option v-for="(item,index) in $dictionary().booleanNum"
							:style="{ fontSize: fontSizeObj.baseFontSize }" :key="index" :label="item.name" :value="item.id" />
						</el-select>
					</td>
				</tr>
		
				<!-- <tr>
					
					<td class="lefttd">{{ $t('人员职级') }}</td>
					<td class="rigthtd">
						<el-select v-model="personForm.dutyLevelName" :placeholder="$t('请选择')">
							<el-option v-for="(item,index) in $dictionary().dutyLevel" :key="index" :label="item.name" :value="item.id" />
						</el-select>
					</td>
					<td class="lefttd">{{ $t('人员职务') }}</td>
					<td class="rigthtd">
						<el-select v-model="personForm.duty" :placeholder="$t('请选择')">
							<el-option v-for="(item,index) in $dictionary().duty" :key="index" :label="item.name" :value="item.id" />
						</el-select>
					</td>
					<td class="lefttd">{{ $t('编制类型') }}</td>
					<td class="rigthtd">
						<el-select v-model="personForm.officialType" :placeholder="$t('请选择')">
							<el-option v-for="(item,index) in $dictionary().officialType" :key="index" :label="item.name" :value="item.id" />
						</el-select>
					</td>
					
				</tr> -->
				<tr>
					<td class="lefttd">{{ $t('办公室') }}</td>
					<td class="rigthtd">
						<el-input v-model="personForm.officeAddress" :size="fontSizeObj.buttonSize" />
					</td>
					<td class="lefttd">{{ $t('办公电话') }}</td>
					<td class="rigthtd">
						<el-input v-model="personForm.officePhone" :size="fontSizeObj.buttonSize" />
					</td>
					<td class="lefttd">{{ $t('办公传真') }}</td>
					<td class="rigthtd">
						<el-input v-model="personForm.officeFax" :size="fontSizeObj.buttonSize" />
					</td>
					
		
				</tr>
		
				<tr>
					<td class="lefttd">{{ $t('是否禁用') }}</td>
					<td class="rigthtd">
						<el-select v-model="personForm.disabled" :placeholder="$t('请选择')" :size="fontSizeObj.buttonSize">
							<el-option v-for="(item,index) in $dictionary().boolean" :label="item.name" :key="index"
							:style="{ fontSize: fontSizeObj.baseFontSize }" :value="item.id" />
						</el-select>
					</td>
					<td class="lefttd">{{ $t('电子邮件') }}</td>
					<td class="rigthtd">
						<el-input v-model="personForm.email" :size="fontSizeObj.buttonSize"
						v-elInputCheck="{required:false,regularType:'email',regularValue:personForm.email}"/>
					</td>
					<td class="lefttd">{{ $t('移动电话') }}<font color="red" style="margin-left:4px">*</font> </td>
					<td class="rigthtd" colspan="3">
						<el-input ref="mobileRef" v-model="personForm.mobile" :size="fontSizeObj.buttonSize"
						v-elInputCheck="{message:$t('请输入移动电话'),regularType:'phone',regularValue:personForm.mobile}"/>
					</td>
				</tr>
				<tr style="height: 40px;">
					<td colspan="6" align="center">{{ $t('个人信息') }}</td>
				</tr>
				<tr>
					<td class="lefttd">{{ $t('婚姻状况') }}</td>
					<td class="rigthtd">
						<el-select v-model="personForm.maritalStatus" :placeholder="$t('请选择')" clearable  :size="fontSizeObj.buttonSize">
							<el-option v-for="(item,index) in $dictionary().maritalStatus" :key="index" :label="item.name"
							:style="{ fontSize: fontSizeObj.baseFontSize }" :value="item.id" />
						</el-select>
					</td>
					<td class="lefttd">{{ $t('专业') }}</td>
					<td class="rigthtd">
						<el-input v-model="personForm.professional" :size="fontSizeObj.buttonSize" />
					</td>
					<td class="lefttd">{{ $t('居住城市') }}</td>
					<td class="rigthtd">
						<el-input v-model="personForm.city" :size="fontSizeObj.buttonSize" />
					</td>
				</tr>
				<tr>
					<td class="lefttd">{{ $t('居住国家') }}</td>
					<td class="rigthtd">
						<el-input v-model="personForm.country" :size="fontSizeObj.buttonSize" />
					</td>
					<td class="lefttd">{{ $t('家庭电话') }}</td>
					<td class="rigthtd">
						<el-input v-model="personForm.homePhone" :size="fontSizeObj.buttonSize" />
					</td>
					<td class="lefttd">{{ $t('证件类型') }}</td>
					<td class="rigthtd">
						<el-select v-model="personForm.idType" :placeholder="$t('请选择')" clearable :size="fontSizeObj.buttonSize" >
							<el-option v-for="(item,index) in $dictionary().principalIDType" :key="index" :label="item.name"
							:style="{ fontSize: fontSizeObj.baseFontSize }" :value="item.id" />
						</el-select>
					</td>
				</tr>
				<tr>
					
					<td class="lefttd">{{ $t('证件号码') }}</td>
					<td class="rigthtd">
						<el-input v-model="personForm.idNum" :size="fontSizeObj.buttonSize"
						v-elInputCheck="{required:false,regularType:'idCard',regularValue:personForm.idNum}"/>
					</td>
		
					<td class="lefttd">{{ $t('政治面貌') }}</td>
					<td class="rigthtd">
						<el-select v-model="personForm.politicalStatus" :placeholder="$t('请选择')" clearable  :size="fontSizeObj.buttonSize">
							<el-option v-for="(item,index) in $dictionary().politicalStatus" :key="index" :label="item.name"
							:style="{ fontSize: fontSizeObj.baseFontSize }" :value="item.id" />
						</el-select>
					</td>
					<td class="lefttd">{{ $t('入职日期') }}</td>
					<td class="rigthtd">
						<el-date-picker
							v-model="personForm.workTime"
							:size="fontSizeObj.buttonSize"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							type="date"
							:placeholder="$t('请选择')"
							style="width: 100%;">
						</el-date-picker>
					</td>
				</tr>
				<tr>
					<td class="lefttd">{{ $t('学历') }}</td>
					<td class="rigthtd">
						<el-select v-model="personForm.education" :placeholder="$t('请选择')" clearable  :size="fontSizeObj.buttonSize">
							<el-option v-for="(item,index) in $dictionary().education" :key="index" :label="item.name"
							:style="{ fontSize: fontSizeObj.baseFontSize }" :value="item.id" />
						</el-select>
					</td>
					<td class="lefttd">{{ $t('人员籍贯') }}</td>
					<td class="rigthtd">
					
						<el-input v-model="personForm.province" :size="fontSizeObj.buttonSize" />
					</td>
					<td class="lefttd">{{ $t('出生日期') }}</td>
					<td class="rigthtd">
						<el-date-picker
							v-model="personForm.birthday"
							:size="fontSizeObj.buttonSize"
							type="date"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							:placeholder="$t('请选择')"
							style="width: 100%;">
						</el-date-picker>
					</td>
				</tr>
				<tr>
					<td class="lefttd">{{ $t('家庭住址') }}</td>
					<td class="rigthtd" colspan="5">
						<el-input v-model="personForm.homeAddress" :size="fontSizeObj.buttonSize" />
					</td>
				</tr>
				<tr>
					<td class="lefttd">{{ $t('人员描述') }}</td>
					<td class="rigthtd"  colspan="5">
						<el-input v-model="personForm.description" type="textarea" :rows="3" :size="fontSizeObj.buttonSize" />
					</td>
				</tr>
			</tbody>
		</table>
		
		<template v-if="settingStore.device === 'mobile'">
			<el-descriptions column="1" border :title="$t('基本信息')" :size="fontSizeObj.buttonSize">
				<el-descriptions-item>
					<template #label>
						<span>{{ $t('人员名称') }}</span>
						<span v-if="isEditState" class="custom-validator-symbol">*</span>
					</template>
					<el-input ref="nameRef" v-model="personForm.name" v-elInputCheck="{message:$t('请输入人员名称')}" />
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<span>{{ $t('登录名称') }}</span>
						<span v-if="isEditState" class="custom-validator-symbol">*</span>
					</template>
					<el-input ref="loginNameRef" v-model="personForm.loginName" v-elInputCheck="{message:$t('请输入登录名称')}" />
				</el-descriptions-item>
				<el-descriptions-item :label="$t('自定义ID')">
					<el-input v-model="personForm.customId" />
				</el-descriptions-item>
				<el-descriptions-item :label="$t('CA认证码')">
					<el-input v-model="personForm.caid" />
				</el-descriptions-item>
				
				<el-descriptions-item :label="$t('性别')">
					<el-select v-model="personForm.sex" :placeholder="$t('请选择')" :size="fontSizeObj.buttonSize">
						<el-option v-for="(item,index) in $dictionary().sex" :key="index" :label="item.name"
						:style="{ fontSize: fontSizeObj.baseFontSize }"	:value="item.id" />
					</el-select>
				</el-descriptions-item>
				<!-- <el-descriptions-item :label="$t('人员职级')">
					<el-select v-model="personForm.dutyLevelName" :placeholder="$t('请选择')">
						<el-option v-for="(item,index) in $dictionary().dutyLevel" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('人员职务')">
					<el-select v-model="personForm.duty" :placeholder="$t('请选择')">
						<el-option v-for="(item,index) in $dictionary().duty" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-descriptions-item> -->
				<el-descriptions-item :label="$t('是否在编')">
					<el-select v-model="personForm.official" :placeholder="$t('请选择')" :size="fontSizeObj.buttonSize">
						<el-option v-for="(item,index) in $dictionary().booleanNum" :key="index" :label="item.name"
						:style="{ fontSize: fontSizeObj.baseFontSize }"	:value="item.id" />
					</el-select>
				</el-descriptions-item>
				<!-- <el-descriptions-item :label="$t('编制类型')">
					<el-select v-model="personForm.officialType" :placeholder="$t('请选择')">
						<el-option v-for="(item,index) in $dictionary().officialType" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-descriptions-item> -->
				<el-descriptions-item :label="$t('办公室')">
					<el-input v-model="personForm.officeAddress" />
				</el-descriptions-item>
				<el-descriptions-item :label="$t('办公电话')">
					<el-input v-model="personForm.officePhone" />
				</el-descriptions-item>
				<el-descriptions-item :label="$t('办公传真')">
					<el-input v-model="personForm.officeFax" />
				</el-descriptions-item>
				<el-descriptions-item :label="$t('电子邮件')">
					<el-input v-model="personForm.email" v-elInputCheck="{required:false,regularType:'email',regularValue:personForm.email}"/>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('是否禁用')">
					<el-select v-model="personForm.disabled" :placeholder="$t('请选择')" :size="fontSizeObj.buttonSize">
						<el-option v-for="(item,index) in $dictionary().boolean" :key="index" :label="item.name"
						:style="{ fontSize: fontSizeObj.baseFontSize }" :value="item.id" />
					</el-select>
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<span>{{ $t('移动电话') }}</span>
						<span v-if="isEditState" class="custom-validator-symbol">*</span>
					</template>
					<el-input ref="mobileRef" v-model="personForm.mobile"
						v-elInputCheck="{message:$t('请输入移动电话'),regularType:'phone',regularValue:personForm.mobile}" />
				</el-descriptions-item>
			</el-descriptions>
			
			
			<el-descriptions column="1" border title="$t('个人信息')" style="margin-top: 20px;">
				<el-descriptions-item :label="$t('婚姻状况')">
					<el-select v-model="personForm.maritalStatus" :placeholder="$t('请选择')" clearable :size="fontSizeObj.buttonSize" >
						<el-option v-for="(item,index) in $dictionary().maritalStatus" :key="index" :label="item.name"
						:style="{ fontSize: fontSizeObj.baseFontSize }"	:value="item.id" />
					</el-select>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('专业')">
					<el-input v-model="personForm.professional" />
				</el-descriptions-item>
				<el-descriptions-item :label="$t('居住城市')">
					<el-input v-model="personForm.city" />
				</el-descriptions-item>
				<el-descriptions-item :label="$t('居住国家')">
					<el-input v-model="personForm.country" />
				</el-descriptions-item>
				<el-descriptions-item :label="$t('家庭电话')">
					<el-input v-model="personForm.homePhone" />
				</el-descriptions-item>
				<el-descriptions-item :label="$t('证件类型')">
					<el-select v-model="personForm.idType" :placeholder="$t('请选择')" clearable :size="fontSizeObj.buttonSize" >
						<el-option v-for="(item,index) in $dictionary().principalIDType" :key="index" :label="item.name"
						:style="{ fontSize: fontSizeObj.baseFontSize }"	:value="item.id" />
					</el-select>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('证件号码')">
					<el-input v-model="personForm.idNum" v-elInputCheck="{required:false,regularType:'idCard',regularValue:personForm.idNum}"/>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('政治面貌')">
					<el-select v-model="personForm.politicalStatus" :placeholder="$t('请选择')" clearable :size="fontSizeObj.buttonSize" >
						<el-option v-for="(item,index) in $dictionary().politicalStatus" :key="index" :label="item.name"
						:style="{ fontSize: fontSizeObj.baseFontSize }"	:value="item.id" />
					</el-select>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('入职日期')">
					<el-date-picker v-model="personForm.workTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
						type="date" :placeholder="$t('请选择')" style="width: 100%;">
					</el-date-picker>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('学历')">
					<el-select v-model="personForm.education" :placeholder="$t('请选择')" clearable :size="fontSizeObj.buttonSize" >
						<el-option v-for="(item,index) in $dictionary().education" :key="index" :label="item.name"
						:style="{ fontSize: fontSizeObj.baseFontSize }"	:value="item.id" />
					</el-select>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('人员籍贯')">
					<el-input v-model="personForm.province" />
				</el-descriptions-item>
				<el-descriptions-item :label="$t('出生日期')">
					<el-date-picker v-model="personForm.birthday" type="date" format="YYYY-MM-DD"
						value-format="YYYY-MM-DD" :placeholder="$t('请选择')" style="width: 100%;">
					</el-date-picker>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('家庭住址')">
					<el-input v-model="personForm.homeAddress" />
				</el-descriptions-item>
				<el-descriptions-item :label="$t('人员描述')">
					<el-input v-model="personForm.description" type="textarea" :rows="3" />
				</el-descriptions-item>
			</el-descriptions>
		</template>
	</template>
	<div v-else-if="step === 2" class="step2-div">
		
		<div  class="table-item">
			<div class="text">选择已有岗位</div>
			<y9Table v-model:selectedVal="personForm.positionIds" :config="positionListTableConfig"></y9Table>
		</div>
		<div class="table-item">
			<div class="text">通过选择职位新增岗位</div>
			<y9Table v-model:selectedVal="personForm.jobIds" :config="jobListTableConfig"></y9Table>
		</div>
		
	</div>
	
	
</template>

<script lang="ts" setup>
	import { useI18n } from "vue-i18n"
	import { $keyNameAssign,$dataType } from '@/utils/object'
	import { $dictionary } from '@/utils/data'
	import {loginNameCheck,getPersonExtById,getPersonExtByIdWithEncry} from '@/api/person/index';
	import { listByType,getJobList } from '@/api/dictionary/index';
	import { getPositionsByParentId } from '@/api/position/index';
	import { $dictionaryFunc } from '@/utils/data'
	import moment from "moment";
	import { useSettingStore } from "@/store/modules/settingStore"
	import { inject, ref, watch } from "vue";
	const { t } = useI18n();
	const settingStore = useSettingStore();
	// 注入 字体变量
	const fontSizeObj: any = inject('sizeObjInfo');
	const props = defineProps({
		
		currInfo: {//当前信息
			type: Object,
			default: () => { return {} }
		},
		
		step:{//步骤
			type:Number,
		
		}
	})
	
	const data = reactive({
		
		personForm: {//新增或编辑人员表单
			id:"",
			parentId:props.currInfo.id,
			customId:"",//自定义id
			name: "",//人员名称
			loginName: "",//登录名称
			jobIds:[],//职位
			positionIds:[],//岗位
			wxId:"",//微信唯一标识 
			sex: t("男"),//性别,
			workTime: "",//入职日期
			// dutyLevelName: "",//人员职级
			// duty: "",//人员职务
			// userType:"",//人员类型
			official: t("是"),//是否在编
			// officialType: "",//编制类型
			officeAddress: "",//办公室
			officePhone: "",//办公电话
			officeFax: "",//办公传真
			policitalStatus: "",//政治面貌
			email: "",//电子邮件
			caid: "",//认证码
			
			birthday: "",//出生日期
			maritalStatus: "",//婚姻状况
			professional: "",//专业
			city: "",//居住城市
			country: "",//居住国家
			homePhone: "",//家庭电话
			idType: "",//证件类型
			idNum: "",//证件号码
			mobile: "",//移动电话
			disabled: "",//是否禁用
			education: "",//学历
			province: "",//人员籍贯
			homeAddress: "",//家庭住址
			description: "",//人员描述
		},
		nameRef:"",
		loginNameRef:"",
		mobileRef:"",
		
	})
	
	let {
		personForm,
		nameRef,
		loginNameRef,
		mobileRef,
	} = toRefs(data);
	
	let jobListTableConfig = ref({//职位列表的表格配置
		columns:[
			{
				type:"selection",
				width:100,
				selectable:() => {
					return true
				}
			},
			{
				title: "职位",
				key: "name",
				width: 200,
			},
		],
		tableData:[],
		pageConfig:false,//取消分页
	})
	
	let positionListTableConfig = ref({//岗位列表的表格配置
		columns:[
			{
				type:"selection",
				width:100,
				selectable:(row,index) =>{
					if(row.headCount<row.capacity){
						return true
					}else {
						return false
					}
				}
			},
			{
				title: "岗位",
				key: "name",
				width: 200,
			},
			{
				title: "占用岗位",
				key: "headCount",
				width: 100,
			},
			{
				title: "岗位容量",
				key: "capacity",
				width: 100,
			},
		],
		tableData:[],
		pageConfig:false,//取消分页
	})
	
	
	onMounted(async ()=>{
			await $dictionaryFunc('dutyLevel',listByType,'dutyLevel')//请求职级
			await $dictionaryFunc('duty',listByType,'duty')//请求职务
			await $dictionaryFunc('officialType',listByType,'officialType')//请求编制类型
			await $dictionaryFunc('principalIDType',listByType,'principalIDType')//请求证件类型
			await $dictionaryFunc('positionList',getPositionsByParentId,props.currInfo.id)//获取岗位列表
			await $dictionaryFunc('jobList',getJobList)//获取职位列表
		
			jobListTableConfig.value.tableData = $dictionary().jobList;
			positionListTableConfig.value.tableData = $dictionary().positionList;
			
			
	});

	async function getPersonExt(){
		let result = await getPersonExtByIdWithEncry(props.currInfo.id);
		if(result.success){
			for (const key in result.data) {
				props.currInfo[key] = result.data[key];
				if (key == "birthday" || key == "workTime") {
					if (result.data[key] != null && result.data[key] != "") {
						props.currInfo[key] = moment(result.data[key]).format("YYYY-MM-DD");
					}
				}
				if (key == "idType") {
					props.currInfo[key] = result.data["idType"];
				}
				if (key == "maritalStatus") {
					if(result.data[key] == 0){
						props.currInfo[key] = "保密";
					}else if(result.data[key] == 1){
						props.currInfo[key] = "已婚";
					}else if(result.data[key] == 2){
						props.currInfo[key] = "未婚";
					}
				}
			}
			$keyNameAssign(personForm.value, result.data);
		}
	}

	defineExpose({
		personForm,
		getPersonExt,
		validForm
	})

	async function validForm() {
		if (!personForm.value.name) {
			nameRef.value.focus();
			setTimeout(()=>{
				nameRef.value.blur()
			},0)
	
			return false;
		}else if (!personForm.value.loginName) {
			loginNameRef.value.focus();
			setTimeout(()=>{
				loginNameRef.value.blur()
			},0)
	
			return false;
		}else if (!personForm.value.mobile) {
			mobileRef.value.focus();
			setTimeout(()=>{
				mobileRef.value.blur()
			},0)
	
			return false;
		}else if(personForm.value.mobile.length > 0){
			
			mobileRef.value.focus();
			setTimeout(()=>{
				mobileRef.value.blur()
			},0)
			
			if(!mobileRef.value.ref.elInputCheckResult){
				return false
			}
			
		}
		
		if (personForm.value.loginName.length > 0) {
			
			let result =  await loginNameCheck(personForm.value.id, personForm.value.loginName)
		
			if (!result.data) {
				ElNotification({
					title: '失败',
					message: '该登录名称已存在，请重新输入登录名称',
					type: 'error',
					duration: 2000,
					offset: 80
				});
				return false
			}
			
		}
		
		return true;
	
	
	}
	
	


	
	
</script>

<style lang="scss" scoped>
	.layui-table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;

		td {
			position: revert;
			padding: 5px 10px;
			// min-height: 20px;
			line-height: v-bind('fontSizeObj.lineHeight');
			font-size: v-bind('fontSizeObj.baseFontSize');
			border-width: 1px;
			border-style: solid;
			border-color: #e6e6e6;
			display: table-cell;
			vertical-align: inherit;
		}

		.lefttd {
			
			
			background: #f5f7fa;
			text-align: center;
			// margin-right: 4px;
			width: 12% ;
		}
		
		.rigthtd{
			div {
				font-size: v-bind('fontSizeObj.baseFontSize');
			}
			:deep(.el-input) {
				font-size: v-bind('fontSizeObj.baseFontSize');
			}
		}
		
	}
	
	.step2-div{
		display: flex;
		justify-content: space-around;
		padding: 20px 50px;
		.table-item{
			// background-color: #eef0f7;
			border: solid 1px #eee;
			border-radius: 4px;
			margin: 0 20px;
			padding:  20px 40px;
			box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.06);
			
			.text{
				color: #666;
				margin-bottom: 10px;
			}
		}
	}
</style>